<div class="pie-wrapper" [ngClass]="{'bg': isBg}" style="display: block">
  <fund-flow-header>
    <div class="chart-header">
      <h4 class="chart-heading">
        龙虎看盘
      </h4>
      <tab-list class="tab-list-primary" (tabClick)="setPeriod($event)" [listData]="tabList" [autoClickFirst]="true"></tab-list>
    </div>
  </fund-flow-header>
  <!-- 这个模块不应该用模板语法全写 -->
  <!--<hr>-->
  <div class="chart-main">
    <div class="chart-pie">
      <canvas #chart></canvas>
      <!--<canvas baseChart [options]="chartOptions" [data]="chartData" [colors]="chartColors" [labels]="chartLabels" chartType="pie"
        (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>-->
      <div class="update-zone">
        <p class="text-center">
          更新时间<br> {{updateTime}}
        </p>
      </div>
    </div>
    <div class="chart-legend">
      <table *ngIf="mergedData" style="width: 100%">
        <thead>
          <tr>
            <td></td>
            <td>流入<span class="flow-in-light"></span></td>
            <!--<td>流入<span class="flow-in-light">{{getOneSumOfArray(puredData, false) | optimizeUnit}}</span></td>-->
            <!--<td>流出<span class="flow-out-light">{{getOneSumOfArray(puredData, true) | optimizeUnit}}</span></td>-->
            <td>流出<span class="flow-out-light"></span></td>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let flow of mergedData; trackBy: trackFlow;">
            <th>{{cateMap[flow.cate]['label']}}</th>
            <td>
              <span class="with-legend" [ngClass]="getColorClass(flow.cate, 'in')">{{flow.ask.amount  | optimizeUnit}}</span>
            </td>
            <td><span class="with-legend" [ngClass]="getColorClass(flow.cate, 'out')">{{flow.bid.amount | optimizeUnit}}</span></td>
          </tr>
        </tbody>
      </table>
      <table *ngIf="puredData" style="width: 100%">
        <thead>
          <tr>
            <td></td>
            <td colspan="2">净流入<span [ngClass]="{'flow-in-light': getSumOfArray(puredData) >= 0, 'flow-out-light': getSumOfArray(puredData) < 0}">{{getSumOfArray(puredData) | optimizeUnit}}</span></td>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let flow of mergedData; let i = index; trackBy: trackFlow;">
            <th>{{cateMap[flow.cate]['label']}}</th>
            <td class="text-right">
              <span class="legend" [ngStyle]="{'border-right-width': getBorderWidth(flow.diff)}" [ngClass]="getColorClass(flow.cate, flow.diff > 0 ? 'in' : 'out')"></span>
            </td>
            <td><span [ngClass]="getColorClass(flow.cate, flow.diff > 0 ? 'in' : 'out')">{{flow.diff | optimizeUnit}}</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>